<template>
  <div>
    <checkBoxTable @make="makeProcessPlan" btnText="生成生产计划单" :tableHeader="headerData" :tableData="metaData">
    </checkBoxTable>
    <div align="center">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="生产计划登记" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
      <el-table :data="registerData">
        <el-table-column property="productId" label="产品编号" width="150"></el-table-column>
        <el-table-column property="productName" label="产品名称" width="200"></el-table-column>
        <el-table-column property="productNumber" label="数量">
          <template slot-scope="scope">
            <el-form :model="scope.row" :rules="rules" ref="ruleForm">
              <el-form-item prop="productNumber">
                <el-input v-model.number="scope.row.productNumber"></el-input>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column property="costPrice" label="单价"></el-table-column>
        <el-table-column property="sumPrice" label="小计">
          <template slot-scope="scope">
            {{scope.row.productNumber >= 0 ? scope.row.productNumber * scope.row.costPrice : 0}}
          </template>
        </el-table-column>
      </el-table>
      <el-form :model="formData" inline style="margin-top: 20px;">
        <el-form-item label="制定人" prop="registerName">
          <el-input v-model="formData.registerName"></el-input>
        </el-form-item>
        <el-form-item label="生产总数" prop="productNumber">
          <el-input v-model="formData.productNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="总金额" prop="sumPrice">
          <el-input v-model="formData.sumPrice" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')">制定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
      {{getPrice}}
    </el-dialog>
  </div>
</template>

<script>
  import checkBoxTable from '@/components/table/checkBoxTable'
  import productFile from '@/api/apis/productFile'
  import productionPlan from '@/api/apis/productionPlan'

  export default {
    data() {
      return {
        currentPage: 1,
        pageSizes: [5, 10, 15, 20],
        pageSize: 5,
        dialogVisible: false,
        headerData: [ // 表头数据
          {
            prop: 'productId',
            label: '产品编号',
            minWidth: '100px',
            sortable: 'true'
          },
          {
            prop: 'productName',
            label: '产品名称',
            minWidth: '100px'
          },
          {
            prop: 'firstKindName',
            label: '产品类型',
            minWidth: '100px'
          },
          {
            prop: 'marketPrice',
            label: '市场单价',
            minWidth: '100px'
          },
          {
            prop: 'costPrice',
            label: '计划成本价',
            minWidth: '100px'
          },
          {
            prop: 'productLevel',
            label: '档次',
            minWidth: '100px'
          },
          {
            prop: 'registerName',
            label: '创建人',
            minWidth: '100px'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: '110px'
          },
        ],
        metaData: [],
        registerData: [],
        rules: {
          productNumber: [{
              required: true,
              message: '不能为空',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: '请输入数字',
              trigger: 'blur'
            },
          ],
        },
        formData: {
          registerName: '',
          productNumber: 0,
          sumPrice: 0
        }
      }
    },
    components: {
      checkBoxTable
    },
    mounted() {
      this.findAllProduct()
    },
    computed: {
      total() {
        return this.metaData.length
      },
      // 计算生产计划数量、价格
      getPrice() {
        let number = 0
        let price = 0
        this.registerData.forEach(data => {
          let num = parseInt(!Number.isInteger(data.productNumber) ? 0 : data.productNumber)
          data.sumPrice = num * parseFloat(data.costPrice)
          number += num
          price += data.sumPrice
        })
        this.formData.productNumber = number
        this.formData.sumPrice = price
        return ''
      }
    },
    methods: {
      findAllProduct() {
        productFile.findAllProduct()
          .then(resp => {
            this.metaData = resp.data
          })
          .catch(err => {
            this.$message.error(err)
            console.log(err)
          })
      },
      makeProcessPlan(dataRow) {
        this.registerData = dataRow
        this.dialogVisible = true
      },
      handleSizeChange(val) {
        this.pageSize = val
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`);
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            productionPlan.maketRegister(this.formData)
            .then(resp => {
              if(resp.code === 200) {
                this.registerData.forEach(data => {
                  data.productionId = resp.data.productionId
                  data.createTime = null
                  data.updateTime = null
                })
                productionPlan.addProduct(this.registerData)
                .then(resp => {
                  if(resp.code === 200){
                    this.$message.success(resp.msg)
                    this.dialogVisible = false
                    this.formData = {}
                  }else{
                    this.$message.error(resp.msg)
                  }
                })
                .catch(err => {
                  console.log(err)
                })
              }
            })
            .catch(err => {
              console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
